<template>
	<view class="prodialog" v-if="!current.linkurl && current.productDialogVisible && current.proid > 0">
	  <view v-if="current.protype == 'shop'" @tap="gotourl" :data-url="'/pages/shop/product?id='+current.proid">
	    <!-- <image src="/static/img/shortvideo_probg.png" class="prodialog-bgimg" /> -->
	    <view class="prodialog-content">
	      <image :src="current.propic" class="prodialog-content-img" />
	      <view class="prodialog-content-info">
	        <text class="prodialog-content-name">{{current.proname}}</text>
	        <text class="prodialog-content-sales">{{current.prosales}}人购买</text>
	        <text class="prodialog-content-price">￥{{current.prosell_price}}</text>
	      </view>
	    </view>
	    <image src="/static/img/close.png" class="prodialog-close" @tap.stop="$emit('close')" />
	  </view>
	  <view v-if="current.protype == 'gift_bag'" @tap="gotourl" :data-url="'/pagesA/giftbag/list?gbid=' + current.proid+'&bid='+current.probid" >
	    <!-- <image src="/static/img/shortvideo_probg.png" class="prodialog-bgimg" /> -->
	    <view class="prodialog-content">
	      <image :src="current.propic" class="prodialog-content-img" />
	      <view class="prodialog-content-info">
	        <text class="prodialog-content-name">{{current.proname}}</text>
	        <text class="prodialog-content-sales"></text>
	        <text class="prodialog-content-price">￥{{current.prosell_price}}</text>
	      </view>
	    </view>
	    <image src="/static/img/close.png" class="prodialog-close" @tap.stop="$emit('close')" />
	  </view>
	</view>
</template>

<script>
	const app = getApp()
	
	export default {
		props: {
			visible: Boolean,
			current: Object,
		},
		methods: {
			gotourl(e) {
				getApp().goto(e.currentTarget.dataset.url, e.currentTarget.dataset.opentype)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.prodialog {
		width: 480rpx;
		height: 190rpx;
		position: absolute;
		bottom: 80rpx;
		right: 10rpx;
		z-index: 10;
		display: flex;
	}
	
	.proview {
		border-radius: 20rpx;
		background-color: #fff;
	}
	
	.prodialog-bgimg {
		width: 480rpx;
		height: 190rpx;
	}
	
	.prodialog-content {
		width: 470rpx;
		display: flex;
		flex-direction: row;
		flex: 1;
		padding: 20rpx;
		position: relative;
		position: absolute;
		// bottom: 24rpx;
		right: 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	
	.prodialog-content-img {
		width: 128rpx;
		height: 128rpx;
		border-radius: 10rpx;
		flex-shrink: 0
	}
	
	.prodialog-content-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-left: 20rpx
	}
	
	.prodialog-content-name {
		color: #212121;
		font-size: 28rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	
	.prodialog-content-sales {
		color: #999999;
		font-size: 24rpx;
		height: 40rpx;
		line-height: 40rpx
	}
	
	.prodialog-content-price {
		color: #FD4A46;
		font-size: 28rpx;
		font-weight: bold;
		height: 50rpx;
		line-height: 50rpx
	}
	
	.prodialog-close {
		width: 36rpx;
		height: 36rpx;
		padding: 10rpx;
		position: absolute;
		top: 6rpx;
		right: 14rpx;
	}
</style>